.order-container{
  padding-bottom: 1px;
  .container-main{
    width: 1000px;
    margin: 20px auto;
    padding-bottom: 20px;
    background: #ffffff;
    .router{
      font-size: 14px;
      color: #000000;
      line-height: 40px;
      height: 40px;
      width: 100%;
      padding-left: 30px;
      border-bottom: 1px solid #e5e5e5;
      .router-active{
        color: #9C9C9C;
      }
    }
    .step-space{
      height: 100px;
      .steps{
        height: 100%;
        white-space: nowrap;
        .item-step{
          position: relative;
          vertical-align: top;
          width: 200px;
          height: 70px;
          margin-right:0;
          left:180px;
          top:30px;
          display: inline-block;
          .step-head{
            width: 28px;
            height: 28px;
            border-radius: 50%;
            text-align: center;
            line-height: 28px;
            vertical-align: top;
            transition: all .15s;
            color: #9c9c9c;
            background: #fafafa;
            border:1px solid #E5E5E5;
            font-size:14px;
            .step-line{
              top: 15px;
              height: 4px;
              left: 29px;
              margin-right: -2px;
              right: -3px;
              border-bottom: 1px solid #E5E5E5;
              border-top: 1px solid #E5E5E5;
              background: #FAFAFA;
              position: absolute;
              display: inline-block;
              z-index: 999;
            }
            .step-line-done{
              border-bottom: 1px solid #FFDDCE;
              border-top: 1px solid #FFDDCE;
              background: #FFF0E8;
            }
            .step-text{
              i{
                &::before{
                  content: '\00a0';
                  display: inline-block;
                  border: 1px solid  #FF4401;
                  border-top-width: 0;
                  border-right-width: 0;
                  width: 10px;
                  height: 6px;
                  -webkit-transform: rotate(-50deg);
                  position: absolute;
                  top: 10px;
                  left: 10px;
                }
              }

            }
          }
          .step-line-done{
            color: #FF4401;
            background: #FFF0E8;
            border: 1px solid #FFDDCE;
          }
          .step-main{
            text-align: left;
            white-space: normal;
            .step-word{
              font-size: 14px;
              color: #9C9C9C;
              line-height: 32px;
              display: inline-block;
            }
            .is-wait{
              font-size: 14px;
              color: #666666;
            }
          }
          &:last-child{
            .step-line{
              display: none ;

            }
          }

        }

      }
    }
    .order-center{
      height: 180px;
      width: 920px;
      margin: 0 auto;
      .order-info{
        float: left;
        border: 1px solid #e5e5e5;
        border-right: none;
        width: 299px;
        height: 180px;
        .info-header{
          width: 280px;
          height: 40px;
          background: #FAFAFA;
          text-align: left;
          font-size: 14px;
          color: #3C3C3C;
          line-height: 40px;
          padding-left: 20px;
        }
        .info-main{
          line-height: 23px;
          font-size: 12px;
          color: #666666;
          div{
            padding-left: 20px;
            letter-spacing: 1px;
          }
        }
      }
      .order-status{
        float: left;
        border: 1px solid #e5e5e5;
        width: 618px;
        height: 180px;
        .order-status-title{
          line-height: 32px;
          margin-top: 35px;
          font-size: 16px;
          color: #3C3C3C;
          margin-left: 50px;
          .status-title{
            margin-left: 30px;
          }
        }
        .order-main {
          margin-left: 103px;
          height: 70px;
          line-height: 22px;
          div,span{
            float: left;
            width: 200px;
            display: inline-block;
          }

          .ml-10{
            margin-left: 10px;
          }
          .fl{
            float: left;
            margin-top: 15px;
          }
        }
        .order-ctrl{
          height: 50px;
          margin-left: 103px;
          line-height: 25px;
          .ml-10{
            margin-left: 10px;
          }
          .fl{
            float: left;
            margin-top:5px;
          }
          .or{
            float: left;
            margin-left: 5px;
            margin-top: 5px;
          }
          .cancel{
            float: left;
            margin-left: 5px;
            margin-top: 5px;
            text-decoration:underline;
            font-size: 14px;
            color: #58A1F6;
          }
        }
        .order-btn{
          cursor: pointer;
          margin-left: 10px;
          display: inline-block;
          width: 90px;
          height: 30px;
          text-align: center;
          float: left;
          background: #FFF0E8;
          border: 1px solid #FFDDCE;
          border-radius: 2px;
          line-height: 30px;
          font-size: 14px;
          color: #FF4401;
        }
        .logo-warning{
          display: inline-block;
          width: 30px;
          height: 30px;
          border: 1px solid #FF4401;
          border-radius: 50%;
          text-align: center;
          color:#FF4401 ;
          font-size: 19px;
          font-weight: bold;
        }
      }

    }
    .selling-detail{
      margin: 0 auto;
      width: 920px;
      font-size: 12px;
      color: #3C3C3C;
      .detail-header{
        font-size: 14px;
        color: #666666;
        background: #FAFAFA;
        border: 1px solid #E5E5E5;
        width: 920px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 0 auto;
      }
      .width-265{
        width: 275px;
      }
      .width-200{
        width: 200px;
      }
      .width-180{
        width: 180px;
      }
      .width-130{
        width:130px;
      }
      .padingL-20{
        padding-left: 20px;
      }
      ul li{
        width: 90px;
        font-size: 14px;
        color: #666666;
        float: left;
      }
      .center-choose{
        margin: 10px auto;
        width: 920px;
        line-height: 40px;
        background: #ffffff;
        .fl{
          float: left;
        }
        .all-btn{
          margin-left: 333px;
          font-size: 14px;
          color: #9C9C9C;
          .active-btn{
            font-size: 14px;
            color: #FF4401;
            background: #FFF0E8;
            border: 1px solid #FFDDCE;
            border-radius: 2px 0 0 2px;
          }
          span{
            cursor: pointer;
            border: 1px solid #E5E5E5;
            display: inline-block;
            width: 90px;
            height: 40px;
            float: left;
            text-align: center;
            background: #FAFAFA;
            border-radius: 2px 0 0 2px;
          }
        }

      }
      input[type="checkbox"] {
        float: left;
        width: 16px;
        height: 16px;
        background-color: #ffffff;
        border: solid 1px #dddddd;
        font-size: 10px;
        vertical-align: middle;
        margin:13px 10px 0 8px;
        padding: 0;
        position: relative;
        display: inline-block;
        cursor: default;
        -webkit-appearance: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-transition: background-color ease 0.1s;
        transition: background-color ease 0.1s;
        &:focus{
          outline: none;
        }
        &:checked{
          border-color:#FF4401;
          &:before{
            content: '\00a0';
            display: inline-block;
            border: 1px solid #FF4401;
            border-top-width: 0;
            border-right-width: 0;
            width: 7px;
            height: 4px;
            -webkit-transform: rotate(-50deg);
            position: absolute;
            top:3px;
            left:3px;
          }
        }
      }
      .detail-main{
        width: 920px;
        .image{

        }
        ul li{
          font-size: 12px;
          color: #3C3C3C;
          height: 75px;
          width: 100%;
          border: 1px solid #e5e5e5;
          border-top:none;
          clear: both;
          .count{
            width: 120px;
          }
          .width-193{
            width: 190px;
          }
          img{
            width:50px;
            height: 50px;
            margin-left: 10px;
          }

          div{
            float: left;
            margin-top: 10px;
            img,input{

            }
          }
          p{
            float: left;
            margin-top: 10px;
            width: 100px;
            height: 30px;
            line-height: 30px;
            padding-left: 9px;
            text-align: center;
          }
          .product{
            margin-top: 1px;
            margin-left: 10px;
            width: 175px;
            word-wrap:break-word;
            font-size: 12px;
            color: #9C9C9C;
            .product-name{
              font-size: 12px;
              width: 100%;
              color: #3C3C3C;
              height: 60px;
              line-height: 25px
            }
          }
          .handle{
            text-align: center;
            padding-left: 0px;
            width: 100px;
            line-height: 30px;
            height: 30px;
            .btn{
              background: #FAFAFA;
              border: 1px solid #E5E5E5;
              border-radius: 2px;
              display: inline-block;
              font-size: 12px;
              color: #3C3C3C;
              width: 60px;
              height: 24px;
              margin-left: 20px;
            }
            a{
              display: inline-block;
              width: 100px;
              font-size: 12px;
              color: #58A1F6;
              float: left;
            }
          }
        }
      }
      .order-total{
        width:920px;
        height:116px;
        margin: 10px auto;
        background: #FFF0E8;
        border: 1px solid #FFDDCE;
        .total-info{
          text-align: right;
          margin-right: 20px;
          font-size: 14px;
          color: #9C9C9C;
          float: right;
          line-height: 30px;
        }
        .sum-price{
          font-weight: bold;
          font-size: 16px;
          color: #FF4401;
        }
      }
    }
  }
}
.modal {
  .modal-dialog {
    width: 770px;
    margin: 200px auto;
    .modal-body {
      padding: 0;
      margin: 10px;
      border-bottom: 1px solid #E5E5E5;
      .description{
        line-height: 30px;
        height: 30px;
        font-size: 12px;
        color: #666666;
      }
      .select-title{
        line-height: 30px;
        height: 30px;
        font-size: 14px;
        color: #3C3C3C;
      }
      .select-all{
        width: 200px;
      }
      .header-title{
        width: 750px;
        height: 40px;
        line-height: 40px;
        background: #FFF0E8;
        div{
          float: left;
          width: 100px;
          text-align: center;
        }
        .width-205{
          width: 205px;
        }
        .width-140{
          width: 140px;
        }
      }
      .main-info{
        width: 642px;
        float: left;
        .main-info-left{
          width: 620px;
          float: left;
          border-bottom: 1px solid #e5e5e5;

          .update{
            margin-top: 3px;
            height: 28px;
            width: 90px;
            color:#FF4401;
          }
          div{
            margin-top: 10px;
            text-align: center;
            width: 105px;
            float: left;
          }
          .product-name{
            word-wrap:break-word;
            font-size: 12px;
            width: 200px;
            color: #3C3C3C;
            height: 60px;
            line-height: 25px;
            text-align: left;
          }
          &:last-child{
            border-bottom: none ;
          }
        }


      }
      .main-info-right{
        float: right;
        width: 108px;
        text-align: center;
        div{
          line-height: 20px;
          height: 40px;
        }
      input{
        margin-top: 3px;
        height: 28px;
        width: 90px;
        color:#FF4401;
        }
      }
    }
  }

}
.modal{
  .modal-dialog.in {
    width: 400px;
    margin: 200px auto;
    .modal-body {
      padding: 0;
      margin: 10px;
      border-bottom: 1px solid #E5E5E5;
      .description{
        line-height: 40px;
        height: 40px;
        font-size: 12px;
        color: #666666;
      }
      .select-title{
        line-height: 40px;
        height: 40px;
        font-size: 14px;
        color: #3C3C3C;
      }
      .select-all{
        width: 100%;
      }
      .header-title{
        width: 750px;
        height: 40px;
        line-height: 40px;
        background: #FFF0E8;
        div{
          float: left;
          width: 100px;
          text-align: center;
        }
        .width-205{
          width: 205px;
        }
        .width-140{
          width: 140px;
        }
      }
      .main-info{
        width: 642px;
        float: left;
        .main-info-left{
          width: 640px;
          float: left;
          border-bottom: 1px solid #e5e5e5;
          border-right: 1px solid #e5e5e5;
          .update{
            margin-top: 3px;
            height: 28px;
            width: 90px;
            color:#FF4401;
          }
          div{
            margin-top: 10px;
            text-align: center;
            width: 105px;
            float: left;
          }
          .product-name{
            word-wrap:break-word;
            font-size: 12px;
            width: 200px;
            color: #3C3C3C;
            height: 60px;
            line-height: 25px;
            text-align: left;
          }
          &:last-child{
            border-bottom: none ;

          }
        }


      }
      .main-info-right{
        float: right;
        width: 108px;
        div{
          line-height: 20px;
          height: 40px;
        }
        input{
          margin-top: 3px;
          height: 28px;
          width: 90px;
          color:#FF4401;
        }
      }
    }
  }

}
.modal{
  .modal-dialog.express {
    width: 400px;
    margin: 200px auto;
    .modal-body {
      padding: 0;
      margin: 10px;
      border-bottom: 1px solid #E5E5E5;
      .select-express{
        select{
          width: 80%;
          height: 30px;
          outline: none;
          border: 1px solid #e5e5e5;
          background: #fff;
          font-size: 12px;
          line-height: 30px;
        }
      }
      .express-id{
        margin-top: 20px;
        input{
          width: 80%;
          height: 30px;
        }
      }
     }


  }

}

